<template>
	<view class="container">
		<TopNav title="搭搭评价"></TopNav>
		<view class="bg-white radius p-lr16 p-t13 p-b12">
			<view class="flex align-center">
				<image :src="avatar || '/static/logo.png'" class="width-24 height-24 round bg-gray" mode=""></image>
				<text class="f-w600 line-height20 f-s14 p-l8">{{name || '-'}}</text>
			</view>
			<view class="m-t12 radius-4 p-lr10 p-tb14 flex justify-between align-center"
				style="background-color: #F5F6F7;">
				<text class="f-w600 f-s15 line-height20">地址类型</text>
				<view class="flex align-center" @click="popupShow = true">
					<text class="f-w400 f-s15 line-height20 m-r2" v-if="addressName">{{ addressName }}</text>
					<text class="f-w400 f-s15 line-height20 m-r2" style="color:#B2B8C1;" v-else>请选择地址类型</text>
					<image src="/static/images/mine/dada-more.png" class="width-20 height-20" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
			<view class="">
				<text class="f-w600 f-s15 line-height22">行为举止</text>
			</view>
			<view class="m-t4">
				<view class="tag">
					<view class="tag-item" v-for="(item,index) in tagList" :key="index"
						@click="handleTagSelect(item,index)" :class="{'tag-active':checkTagStatus(item)}">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
			<view class="">
				<text class="f-w600 f-s15 line-height22">用户情况描述</text>
			</view>
			<view class="m-t12">
				<u-textarea v-model="form.technician_content" placeholder="请输入情况描述" count border="none" height="250rpx"
					placeholderClass="textarea-placeholder" maxlength="100" style="color:#202020;"></u-textarea>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom p-lr16">
			<view class="self-btn flex flex-direction full-width" hover-class="pressed" @click="handleSubmit">
				<text class="f-s16 line-height22">提交</text>
			</view>
		</view>
		<Popup :show.sync="popupShow" title="选择地址类型">
			<view class="p-lr16" style="margin-top:52rpx;max-height:70vh;overflow-y: auto;">
				<van-picker :default-index="current" :columns="columns" ref="picker">
				</van-picker>

				<view class="self-btn flex flex-direction full-width" hover-class="pressed"
					@click="handlePickerConfirm">
					<text class="f-s16 line-height22">确认</text>
				</view>
			</view>
		</Popup>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		commentList,
		commentSubmit
	} from '@/api/order/index.js'
	import Popup from "@/components/popup/index.vue"
	export default {
		components: {
			Popup
		},
		data() {
			return {
				name:'',
				avatar:'',
				current: 0,
				addressName: '',
				columns: [],
				popupShow: false,
				form: {
					order_sn: '',
					behavior: '',
					address: '',
					technician_content: '',
				},
				tagSelection: [],
				tagList: []
			};
		},
		onLoad(query) {
			this.form.order_sn = query.id
			this.name = query.name
			this.avatar = query.avatar
			this.getCommentList()
		},
		methods: {
			handlePickerConfirm() {
				this.current = this.$refs['picker'].getIndexes()[0]
				let value = this.$refs['picker'].getValues()[0]
				this.form.address = value['value']
				this.addressName = value['text']
				this.popupShow = false
			},
			handleSubmit() {
				if (!this.form.address) {
					this.$toast('请选择地址类型')
					return
				}
				if (this.tagSelection.length === 0) {
					this.$toast('请评价行为举止')
					return
				}
				if (!this.form.technician_content) {
					this.$toast('请填输入用户情况描述')
					return
				}
				this.form.behavior = this.tagSelection.join(",")
				this.$modal.loading('正在评论').then(() => {
					commentSubmit(this.form).then(res => {
						this.$modal.closeLoading()
						uni.$emit('evaluate', true)
						this.$tab.navigateBack()
					}).catch(() => this.$modal.closeLoading())
				})

			},
			getCommentList() {
				commentList().then(res => {
					let {
						data
					} = res
					this.tagList = data.behavior.map(item => {
						return {
							text: item.name,
							value: item.id
						}
					})
					this.columns = data.address.map(item => {
						return {
							text: item.name,
							value: item.id
						}
					})
				})
			},
			checkTagStatus(item) {
				return this.tagSelection.indexOf(item.value) !== -1
			},
			handleTagSelect(item) {
				let index = this.tagSelection.indexOf(item.value)
				if (index !== -1) {
					this.tagSelection.splice(index, 1)
				} else {
					this.tagSelection.push(item.value)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
	}

	.container {
		padding: 20rpx 24rpx;

		.tag {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;

			.tag-item {
				padding: 16rpx 32rpx;
				background-color: #F5F6F7;
				border-radius: 32rpx;
				font-weight: 400;
				font-size: 24rpx;
				text-align: center;
				margin-right: 20rpx;
				flex-shrink: 0;
				margin-top: 20rpx;
			}

			.tag-active {
				background-color: #FE3F59;
				color: #fff;
			}
		}

		::v-deep .textarea-placeholder {
			font-weight: 400;
			font-size: 30rpx;
			color: #B2B8C1;
			line-height: 42rpx;
		}

		::v-deep .u-textarea {
			padding: 0;
			font-weight: 400;
			font-size: 30rpx;
		}

		::v-deep.uni-textarea-textarea {
			color: #202020 !important;
		}
	}
</style>